<template>
  <div class="referinput-component">
<form formsubmit="formSubmit" report-submit="true" bindreset="formReset">
    <div class="input-list">
      <div class="input">
        <input class="normaltext" type="text" v-model='xingming' placeholder="姓名">
        <div class="is-must normaltext">*</div>
      </div>

      <div class="input">
        <input class="normaltext" type="number" v-model='dianhua' placeholder="电话">
        <div class="is-must normaltext">*</div>
      </div>

      <div class="input">
        <input class="normaltext" type="text" v-model='title' placeholder="报名企业">
        <div class="is-must normaltext">*</div>
      </div>

      <div class="input">
        <button class="submit-btn normaltext" formType="submit" @click="formSubmit">确认提交</button>
        <div class="is-must normaltext"></div>
      </div>

    </div>
</form>

  </div>
</template>
<script>
  const wxapp = getApp();
  export default {
    data(){
      return{
        xingming:'',
        dianhua: '',
        title: ''
      }
    },
    components:{
      // Xinput
    },
    methods: {
      formSubmit: function(e) {
        if(this.xingming=='')
        {
          wx.showToast({
            title: '姓名必须填写.',
            icon: 'success',
            duration: 2000
          })
          return false
        }
        if(this.dianhua=='')
        {
          wx.showToast({
            title: '电话必须填写.',
            icon: 'success',
            duration: 2000
          })
          return false
        }
        if(this.title=='')
        {
          wx.showToast({
            title: '企业必须填写.',
            icon: 'success',
            duration: 2000
          })
          return false
        }
        wx.showLoading({
  title: '加载中',
})
        wx.request({
          url: wxapp.globalData.ROOT_URL, //仅为示例，并非真实的接口地址
          data: {
             service: 'App.Hong.FormData',
             table: '4_form_zxbm',
             data: {
               xingming: this.xingming, dianhua: this.dianhua, title: this.title
             },
             stieid: 4
          },
          header: {
              'content-type': 'application/json' // 默认值
          },
          success: function(res) {
            wx.hideLoading()
            if(res.data.data.result >0 ) {
              wx.showToast({
                title: '报名成功.',
                icon: 'success',
                duration: 2000
              })
            }else {
              wx.showToast({
                title: '报名失败.',
                icon: 'success',
                duration: 2000
              })
            }
          }
        })
      },
      formReset: function() {
        console.log('form发生了reset事件')
      }
    }
  }
</script>
<style scoped>
  .referinput-component{
    padding: 0 50rpx;
    width: 100%;
  }
  .input{
    margin: 20rpx 0;
  }
  .input-list input{
    border: 1rpx solid #000;
    height: 50rpx;

  }
  .input{
    display: flex;
    flex-direction: row;
  }
  .input input,.input .is-must{
    display: flex;
  }
  .input input{
    flex: 1;
    padding: 10rpx;
  }
  .input .is-must{
    width: 20rpx;
    padding-left: 15rpx;
    color: #E9161F;
    line-height: 75rpx;
  }
  .submit-btn{
    width: 100%;
    color: #fff;
    background: #2197D8;
  }
</style>
